<template>
  <div class="CommandInput">
    <div class="input-con">
      <input
        type="text"
        id="commandInput"
        v-model="command"
        @keyup.tab="doCompletion"
        @keydown.enter="submitCommand"
      />
      <div id="commit" @click="submitCommand">提交</div>
    </div>
    <div class="auto-completion">{{ autoCompletion }}</div>
  </div>
</template>

<script>
import { findStringByHead } from "../utils/Tools";

import handlers from "../utils/ThreeParser/handlers";
import { COMMIT_COMMAND } from "../store/events";

import { commandDataEncoder } from "../utils/DataEncoder";

export default {
  name: "command-input",
  data() {
    const commandList = [];
    const commandSub = {};
    for (const key in handlers) {
      commandList.push(key);
      commandSub[key] = [];
      for (const subkey in handlers[key]) {
        commandSub[key].push(subkey);
      }
    }

    return {
      command: "",
      autoCompletion: "请输入绘图命令",

      commandList,
      commandSub,
    };
  },
  mounted() {
    // 阻止浏览器默认tab行为
    let input = document.getElementById("commandInput");
    input.addEventListener("keydown", (event) => {
      if (event.keyCode === 9) {
        event.preventDefault();
      }
    });
  },
  watch: {
    command(val) {
      val = val.toLowerCase();
      this.command = val;
      if (!val) {
        this.autoCompletion = "请输入绘图命令";
      } else if (val.indexOf(" ") === -1) {
        this.autoCompletion = findStringByHead(this.commandList, val);
      } else {
        const commandSplit = val.split(" ");
        if (this.commandList.indexOf(commandSplit[0]) === -1) {
          this.autoCompletion = "";
        } else if (commandSplit.length === 2) {
          const subCompletion = findStringByHead(
            this.commandSub[commandSplit[0]],
            commandSplit[1]
          );
          if (subCompletion) {
            this.autoCompletion = commandSplit[0] + " " + subCompletion;
          } else {
            this.autoCompletion = "";
          }
        } else {
          this.autoCompletion = "";
        }
      }
    },
  },
  methods: {
    doCompletion() {
      if (this.autoCompletion && this.autoCompletion !== "请输入绘图命令")
        this.command = this.autoCompletion;
    },
    submitCommand() {
      try {
        this.$store.dispatch(COMMIT_COMMAND, {
          command: commandDataEncoder(this.command),
          onlyExecute: this.$store.state.offline,
        });
        this.command = "";
      } catch (error) {
        this.$toast.error("错误的命令格式！");
      }
    },
  },
};
</script>

<style scoped>
.CommandInput {
  position: relative;
  padding: 12px 12px 8px;
}
.input-con {
  display: flex;
  column-gap: 3px;

  position: relative;
  z-index: 1;
}
#commit {
  border: #2f90b9 solid 2px;
  border-radius: 6px;
  width: 48px;
  background-color: #2f90b9;
  padding: 5px 10px;
  color: white;
  text-align: center;
  cursor: pointer;

  transition: all 200ms linear;
}
#commit:hover {
  color: #2f90b9;
  background-color: white;
}
input {
  display: block;
  flex-grow: 1;

  border: silver solid 2px;
  border-radius: 5px;
  outline: none;
  padding: 2px 2px;

  background-color: transparent;
}
input:focus {
  border-color: #2f90b9;
}
.auto-completion {
  position: absolute;
  top: 20px;
  left: 16px;
  z-index: 0;
  color: rgb(170, 170, 170);
}
input,
.auto-completion {
  font-family: Consolas, 楷体;
  font-size: 16px;
}
</style>
